<template class="sdh">
  <!-- 上导航菜单左右  左优酷 右登录等 -->
  <!-- 搜索框 用户点击出弹出框 -->
  <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    :ellipsis="false"
    @select="handleSelect"
  >
    <el-menu-item index="0">
      <RouterLink to="/">
        <img
          style="width: 50px"
          src="../assets/images/优酷logo.jpg"
          alt="W茶室W"
        />
      </RouterLink>
    </el-menu-item>
    <!-- 左侧导航 -->
    <div class="flex-grow" />
    <!-- 首页 -->
    <el-menu-item index="1">首页</el-menu-item>

    <!-- 购物 -->
    <el-sub-menu index="2">
      <template #title>预约</template>
      <el-menu-item index="2-1">包厢</el-menu-item>
      <el-menu-item index="2-2">座位</el-menu-item>
    </el-sub-menu>

    <!-- 购物 -->
    <el-sub-menu index="3">
      <template #title>购物</template>
      <el-menu-item index="3-1">购物车</el-menu-item>
      <el-menu-item index="3-2">订单</el-menu-item>
    </el-sub-menu>
    <!-- 用户 -->
    <el-menu-item index="4">资讯</el-menu-item>

    <!-- 用户 -->
    <el-sub-menu index="5">
        <el-button plain @click="open" class="yonghu">
        <!--头像-->
        <Avatar />
      </el-button>
    </el-sub-menu>
    
  </el-menu>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
//弹出框
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRouter } from 'vue-router';
//头像
import Avatar from '@/components/shouye/Avatar.vue';

const router = useRouter(); 
//弹出框
const open = () => {
  ElMessageBox.confirm(
    '是否前往登录界面', 
    '用户登录',
    {
      confirmButtonText: '是',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
  .then(() => {
    //跳转到登录界面
    router.push({ name: 'login' }); 
    ElMessage({
      type: 'success',
      message: '正在前往登录界面',
    });
  })
  .catch(() => {
    ElMessage({
      type: 'info',
      message: '已取消登录',
    });
  });
};
//搜索框
const input = ref('');
//轮播图
const activeIndex = ref('1');
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
</script>

<style scoped>
.el-menu-demo {
  background-color: #fff;
  width: 100%; /* 设置菜单宽度为 100% 以自适应父元素 */
  display: flex; /* 使用弹性布局 */
  flex-wrap: wrap; /* 允许菜单项换行 */
  box-sizing: border-box; /* 确保内边距和边框包含在宽度内 */
}

/* 左侧导航 */
.flex-grow {
  flex-grow: 1;
}

/* 上导航 */
.sdh {
  width: 100%;
}

/* 弹出窗口 */
.tcck {
  border: 0px solid;
  padding: 0px;
  margin: 0px;
}

.yonghu {
  border: 0px;
}

/* 响应式设计，小屏幕下调整样式 */
@media (max-width: 768px) {
  .el-menu-demo {
    font-size: 14px; /* 减小字体大小 */
  }
  .el-menu-demo .el-menu-item,
  .el-menu-demo .el-sub-menu__title {
    padding: 0 10px; /* 减小菜单项的内边距 */
  }
}
</style>